import { createRenderer } from "vue";
import App from "./App.vue";
import { Application, Graphics } from "pixi.js";

// 自定义渲染器
// renderer 对象
const renderer = createRenderer({
  // 渲染接口
  // 实现一个方法
  // pixi api -> dom api 是不一样的
  // 渲染接口内给它处理
  createElement(type) {
    // 创建一个元素
    console.log(type);
    let element;

    switch (type) {
      case "rect":
        element = new Graphics();
        element.beginFill(0xff0000);
        element.drawRect(0, 0, 500, 500);
        element.endFill();
        break;
      case "circle":
        element = new Graphics();
        element.beginFill(0xffff00);
        element.drawCircle(0, 0, 50);
        element.endFill();
        break;
    }

    console.log(element);
    return element;
  },
  insert(el, parent) {
    // 把一个元素添加到视图时调用
    // vue runtime
    parent.addChild(el);
  },
  patchProp(el, key, prevValue, nextValue) {
    console.log(key, nextValue);
    switch (key) {
      case "x":
        el.x = nextValue;

        break;

      case "y":
        el.y = nextValue;

        break;

      default:
        break;
    }
  }
});

// Init game
const game = new Application({
  width: 750,
  height: 1080
});

document.body.append(game.view);

// game.stage
renderer.createApp(App).mount(game.stage);

// custom renderer
// vue 渲染流程 从写 template 到渲染出来的一个过程
// console.log(App.render());
// template -> render() -> 返回 vnode （虚拟节点 虚拟dom） -> mountElement (把虚拟节点转换成真实的 dom 元素) -> 添加到视图内
// 根容器
// div

// pixijs(canvas) + vue3 = custom renderer
// vue -> dom 平台
// createApp
// createApp(App).mount("#app");
